<template>
  <div class="sm-login">
    <img
      class="sm-login-text"
      src="@/assets/images/pw_login_text.png"
      @click="emits('changeLoginType')"
    />
    <img
      class="sm-login-icon"
      src="@/assets/images/pw_login.png"
      alt=""
      @click="emits('changeLoginType')"
    />
  </div>

  <div class="qr-box">
    <span>请打开微信扫码登录</span>
    <a-image :src="wxQrInfo.qrCode" alt="" show-loader
  /></div>
</template>

<script setup lang="ts">
  import { defineEmits, onMounted, reactive } from 'vue';
  import { getWxLoginQrCode } from '@/api/user';

  // let interval: any;
  const wxQrInfo = reactive({
    key: '',
    qrCode: '',
    loginType: 1,
  });
  const getWxQrCode = async () => {
    const resp = await getWxLoginQrCode(wxQrInfo.key);
    const { key, qrCode, loginType } = resp.data;
    wxQrInfo.key = key === null ? wxQrInfo.key : key;
    wxQrInfo.qrCode = qrCode === null ? wxQrInfo.qrCode : qrCode;
    wxQrInfo.loginType = loginType;
  };

  onMounted(() => {
    getWxQrCode();
    // interval = setInterval(() => {
    //   getWxQrCode();
    // }, 5000);
  });

  const emits = defineEmits(['loginSuccess', 'changeLoginType']);
</script>

<style scoped lang="less">
  .sm-login {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: end;

    &-icon {
      width: 50px;
      height: 50px;
      cursor: pointer;
    }

    &-text {
      height: 25px;
      cursor: pointer;
    }
  }
  .qr-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
</style>
